<template>
  <div class="app-container" style="padding: 8px;">
    <div class="head-container">
      <el-form ref="form" label-position="right" :model="form" size="small" label-width="80px">
        <el-form-item label-width="90" label="请输入表名:">
          <el-input
            v-model="form.tableName"
            clearable
            placeholder=""
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"/>
        </el-form-item>
        <!--   上传文件   -->
        <el-upload
          ref="upload"
          :limit="1"
          :before-upload="beforeUpload"
          :auto-upload="true"
          :headers="headers"
          :on-success="handleSuccess"
          action=""
          :http-request="doSubmit"
        >
          <el-button slot="trigger" size="small" type="primary" style="margin-right:10px;">选取文件</el-button>
          <span slot="tip" class="el-upload__tip">请上传excel或压缩后zip文件，且不超过100M</span>
        </el-upload>
        <el-form-item label="生成类别" prop="generatorType">
          <el-radio-group v-model="form.generatorType" size="medium">
            <el-radio v-for="(item, index) in generatorTypeOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="结果" prop="body">
          <el-input v-model="form.body" style="weight:75%;" rows="15" type="textarea"/>
        </el-form-item>

      </el-form>
    </div>
    <div class="body-container">
      {{ bodyContainer }}
    </div>
  </div>

</template>

<script>
    import {mapGetters} from 'vuex'
    import {getToken} from '@/utils/auth'
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime, downloadFile} from '@/utils/index'
    import {createMysqlFromFile} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'

    export default {
        mixins: [initData],
        data() {
            return {
                form: {
                    body: '',
                    tableName: '',
                    generatorType: 1

                },
                bodyContainer: '',
                generatorTypeOptions: [{
                    "label": "Mysql-create",
                    "value": 1
                }, {
                    "label": "Java-get/set版",
                    "value": 2
                }
                ],
                headers: {'Authorization': 'Bearer ' + getToken()}
            }
        },
        computed: {
            ...mapGetters([
                'baseApi',
                'excelFileUploadApiGeneratorMysql',
                'excelFileUploadApiGeneratorMysqlZip'
            ])
        },
        created() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            parseTime,
            checkPermission,
            beforeUpload(file) {
                let isLt2M = true
                isLt2M = file.size / 1024 / 1024 < 100
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 100MB!')
                }
                this.loading = false
                return isLt2M
            },
            handleSuccess(response, file, fileList) {
                //this.bodyContainer = response
                //this.$refs.upload.clearFiles()
                //this.resetForm()
            },
            resetForm() {
                this.$refs['form'].resetFields()
                this.$refs.upload.clearFiles()
                this.form = {
                    tableName: '',
                    generatorType: 1
                }
            },
            doSubmit(item) {
                this.loading = true
                let tableName = this.form.tableName;
                console.log(tableName);
                let ttFile = item.file;
                let generatorType = this.form.generatorType;
                console.log(ttFile);
                const form = new FormData()
                // 文件对象
                form.append('file', ttFile)
                form.append('tableName', tableName)
                form.append('generatorType', generatorType)
                console.log(form);
                let fileName = ttFile.name;
                let outputFileName = fileName.split(".")[0] + `.zip`;
                console.log(fileName);
                createMysqlFromFile(form).then(res => {
                    //downloadFileFunction(res, outputFileName)
                    this.resetForm()
                    this.form.body = res.data
                    this.$notify({
                        title: '文件处理成功',
                        type: 'success',
                        duration: 2500
                    })
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>

<style scoped>
  .el-image__error, .el-image__placeholder {
    background: none;
  }

  .el-image-viewer__wrapper {
    top: 55px;
  }
</style>
